<template>
  <div class="all" :key="$route.fullPath">
    <div class="login-container">
      <img class="none" src="../../assets/image/bgbg.png" alt="" />
      <span class="spanName">welcome</span>
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        auto-complete="on"
        label-position="left"
      >
        <div class="title-container" style="display: flex; align-items: center">
          <img
            style="width: 50px; height: 50px; margin-right: 10px"
            src="../../assets/image/favicon.png"
            alt=""
          />
          <p class="title">智慧能源管理端</p>
        </div>

        <el-form-item prop="userPhone" class="border">
          <span class="svg-container">
            <svg-icon icon-class="user" />
          </span>
          <el-input
            ref="userPhone"
            v-model="loginForm.userPhone"
            placeholder="请输入用户名"
            name="userPhone"
            clearable
            type="text"
            tabindex="1"
            auto-complete="on"
          />
        </el-form-item>
        <el-form-item prop="password" class="border">
          <span class="svg-container">
            <svg-icon icon-class="password" />
          </span>
          <el-input
            :key="passwordType"
            ref="password"
            v-model="loginForm.password"
            :type="passwordType"
            placeholder="请输入密码"
            name="password"
            tabindex="2"
            auto-complete="on"
            @keyup.enter.native="handleLogin"
          />
          <span class="show-pwd" @click="showPwd">
            <svg-icon
              :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
            />
          </span>
        </el-form-item>
        <el-form-item class="border" style="position: relative">
          <span class="svg-container">
            <svg-icon icon-class="code" />
          </span>
          <el-input
            v-model="loginForm.status"
            placeholder="请输入验证码"
            @keyup.enter.native="handleLogin"
          />
          <div class="box" @click="getCode">
            <span :style="num1Style">{{ num1 }}</span>
            <span :style="num2Style">{{ num2 }}</span>
            <span :style="num3Style">{{ num3 }}</span>
            <span :style="num4Style">{{ num4 }}</span>
          </div>
        </el-form-item>
        <el-form-item class="ps">
          <el-checkbox @change="change" style="float: left" v-model="checked"
            >记住密码</el-checkbox
          >
          <div ref="for" style="float: right; color: #409eff" @click="forget">
            忘记密码
          </div>
        </el-form-item>

        <el-button
          :disabled="
            loginForm.status && loginForm.userPhone && loginForm.password
              ? false
              : true
          "
          type="primary"
          :loading="loading"
          style="width: 100%; margin-bottom: 30px"
          @click.native.prevent="handleLogin"
          >登录</el-button
        >
      </el-form>
    </div>

    <div class="dialog">
      <el-dialog
        @close="close"
        title="温馨提示"
        :visible.sync="dialog"
        width="40%"
        center
      >
        <p>尊敬的用户 您好！请确认您所属的厂商！</p>
        <el-radio-group v-model="tenantId">
          <el-radio
            v-for="item in tenantList"
            :key="item.tenantId"
            :label="item.tenantId"
            >{{ item.tenantName }}</el-radio
          >
        </el-radio-group>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="goLogin">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
import { setToken } from "@/utils/auth";
import { loginApi, getTenantIdApi } from "../../api/user";
import Silder from "@/components/Silder";
export default {
  components: {
    Silder,
  },
  name: "Login",
  data() {
    const validatestatus = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请拖动滑块完成验证"));
      } else {
        callback();
      }
    };
    return {
      num1Style: {
        transform: "rotate(0deg)",
      },
      num2Style: {
        transform: "rotate(0deg)",
      },
      num3Style: {
        transform: "rotate(0deg)",
      },
      num4Style: {
        transform: "rotate(0deg)",
      },
      num1: "",
      num2: "",
      num3: "",
      num4: "",
      tenantList: [],
      checked: "",
      dialogShow: false,
      dialog: false,
      tenantId: "",
      loginForm: {
        userPhone: "",
        password: "",
        status: "",
        userType: "",
        tenantId: "",
      },
      userType: "0",
      postData: {
        userPhone: "",
      },
      loginRules: {
        userPhone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          { min: 11, max: 11, message: "请输入正确的手机号", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        status: [{ validator: validatestatus, trigger: "change" }],
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
    };
  },
  created() {
    this.getCode();
    if (localStorage.getItem("userPhone") && localStorage.getItem("password")) {
      this.checked = true;
      this.loginForm.userPhone = localStorage.getItem("userPhone");
      this.loginForm.password = localStorage.getItem("password");
    } else {
      this.checked = false;
      this.loginForm = {
        userPhone: "",
        password: "",
        status: "",
        userType: "",
        tenantId: "",
      };
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
    "loginForm.userPhone": {
      //监视对象
      handler(e) {
        if (this.checked == true) {
          localStorage.setItem("userPhone", e);
        }
      },
    },
    "loginForm.password": {
      //监视对象
      handler(e) {
        if (this.checked == true) {
          localStorage.setItem("password", e);
        }
      },
    },
  },
  methods: {
    getCode() {
      this.num1Style.transform = `rotate(${
        Math.floor(Math.random() * (70 + 70 + 1)) - 70
      }deg)`;
      this.num2Style.transform = `rotate(${
        Math.floor(Math.random() * (70 + 70 + 1)) - 70
      }deg)`;
      this.num3Style.transform = `rotate(${
        Math.floor(Math.random() * (70 + 70 + 1)) - 70
      }deg)`;
      this.num4Style.transform = `rotate(${
        Math.floor(Math.random() * (70 + 70 + 1)) - 70
      }deg)`;
      this.num1 = Math.floor(Math.random() * 10);
      this.num2 = Math.floor(Math.random() * 10);
      this.num3 = Math.floor(Math.random() * 10);
      this.num4 = Math.floor(Math.random() * 10);
    },
    goLogin() {
      this.$store.commit("user/setPhone", this.loginForm.userPhone);
      this.loginForm.tenantId = this.tenantId;
      sessionStorage.setItem("tenantId", this.tenantId);
      loginApi(this.loginForm)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            setToken(res.data.tokenValue);
            this.$router.push("/");
          } else {
            this.loading = false;
          }
        })
        .catch(() => {
          this.dialog = false;
          this.loading = false;
        });
    },
    handleSuccess() {
      this.loginForm.status = true;
    },
    handleError() {
      Message({
        message: "滑动验证失败，请重试！",
        type: "warning",
        duration: 3 * 1000,
      });
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    // 获取
    getTenantId(e) {
      let that = this;
      getTenantIdApi(e)
        .then((res) => {
          if (res.code == 200) {
            if (res.data.length == 1) {
              this.loginForm.tenantId = res.data[0].tenantId;
              sessionStorage.setItem("tenantId", res.data[0].tenantId);
              loginApi(this.loginForm)
                .then((res) => {
                  this.loading = false;
                  if (res.code == 200) {
                    setToken(res.data.tokenValue);
                    that.$router.push("/");
                  } else {
                    that.loading = false;
                  }
                })
                .catch((err) => {
                  that.loading = false;
                });
            } else if (res.data.length == 0) {
              this.$message.error("暂无该用户!");
              this.loading = false;
            } else {
              this.tenantId = res.data[0].tenantId;
              this.dialog = true;
              this.tenantList = res.data;
            }
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 登录
    handleLogin() {
      if (
        Number(this.loginForm.status) ==
        Number(`${this.num1}${this.num2}${this.num3}${this.num4}`)
      ) {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.loading = true;
            this.getTenantId(this.loginForm.userPhone);
          } else {
            this.loading = false;
            Message({
              message: "账号密码格式有误，请重试！",
              type: "error",
              duration: 2 * 1000,
            });
            return false;
          }
        });
      } else {
        Message({
          message: "验证码有误",
          type: "error",
          duration: 2 * 1000,
        });
        this.loginForm.status = "";
        this.getCode();
      }
    },
    // 忘记密码
    forget() {
      this.$confirm("请联系开户管理员", "忘记密码", {
        confirmButtonText: "确定",
        type: "warning",
        showCancelButton: false, //不显示取消按钮
        showClose: false, //是否显示右上角的x
        closeOnClickModal: false, //是否可以点击空白处关闭弹窗
        center: false, //文字居中显示
      }).then(() => {});
    },
    close() {
      this.dialog = false;
      this.loading = false;
    },
    // 记住密码
    change() {
      if (this.checked == false) {
        localStorage.removeItem("userPhone");
        localStorage.removeItem("password");
      } else {
        localStorage.setItem("userPhone", this.loginForm.userPhone);
        localStorage.setItem("password", this.loginForm.password);
      }
    },
  },
};
</script>

<style lang="scss">
@supports (-webkit-mask: none) and (not (cater-color: #fff)) {
  .login-container .el-input input {
    color: #fff;
  }
}
@media only screen and (max-width: 1024px) {
  .all {
    background-color: #1890ff;
    width: 100%;
    height: 100%;
    .login-container {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      min-height: 100%;
      height: 100%;
      .none {
        display: none;
      }
      .spanName {
        display: block;
        color: #fff;
        font-weight: bold;
        font-size: 50px;
        margin-bottom: 100px;
        border-bottom: 2px solid #fff;
      }
      .login-form {
        position: relative;
        background-color: #fff;
        width: 80%;
        padding: 60px 20px 15px;
        border-radius: 30px;
      }

      .svg-container {
        padding: 6px 5px 6px 15px;
        color: #d8d8d8;
        vertical-align: middle;
        width: 30px;
        display: inline-block;
      }

      .title-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;

        .title {
          font-size: 16px;
          color: #000;
        }
      }

      .show-pwd {
        position: absolute;
        right: 7px;
        top: 4px;
        font-size: 16px;
        color: #d8d8d8;
        cursor: pointer;
        user-select: none;
      }
      .box {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 30%;
        color: #1890ff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 19px;
      }
      .box:hover {
        cursor: pointer;
      }
      .el-form-item__content {
        .el-input {
          display: inline-block;
          height: 47px;
          width: 86%;

          input {
            background: transparent;
            border: 0;
            border-radius: 0px;
            padding: 12px 5px 12px 15px;
            color: #000;
            height: 47px;
            caret-color: #000; //光标颜色

            &:-webkit-autofill {
              transition: background-color 5000s ease-in-out 0s;
              -webkit-text-fill-color: #000 !important;
            }
          }
        }
      }

      .ps {
        margin-bottom: 0;
        margin-top: -10px;

        div:hover {
          cursor: pointer;
        }

        .el-form-item__content {
          width: 100%;
          color: #409eff;
        }

        .el-checkbox {
          .el-checkbox__label {
            color: #409eff;
          }
        }

        .is-checked {
          .el-checkbox__label {
            color: #409eff;
          }
        }
      }

      .border {
        background-color: #fff;
        border-radius: 5px;

        .el-form-item__content {
          border: 1px solid #d8d8d8;
        }
      }
    }
  }
}
@media only screen and (min-width: 1024px) {
  .all {
    width: 100%;
    height: 100vh;
    background-color: #1890ff;
    .login-container {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      min-height: 100%;
      height: 100%;
      .spanName {
        display: none;
      }
      .login-form {
        position: relative;
        background-color: #fff;
        width: 530px;
        padding: 160px 60px 50px;
        border-radius: 30px;
      }

      .svg-container {
        padding: 6px 5px 6px 15px;
        color: #d8d8d8;
        vertical-align: middle;
        width: 30px;
        display: inline-block;
      }

      .title-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;

        .title {
          font-size: 40px;
          color: #000;
        }
      }

      .show-pwd {
        position: absolute;
        right: 7px;
        top: 4px;
        font-size: 16px;
        color: #d8d8d8;
        cursor: pointer;
        user-select: none;
      }
      .box {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 30%;
        color: #1890ff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 19px;
      }
      .box:hover {
        cursor: pointer;
      }
      .el-form-item__content {
        .el-input {
          display: inline-block;
          height: 47px;
          width: 86%;

          input {
            background: transparent;
            border: 0;
            border-radius: 0px;
            padding: 12px 5px 12px 15px;
            color: #000;
            height: 47px;
            caret-color: #000; //光标颜色

            &:-webkit-autofill {
              transition: background-color 5000s ease-in-out 0s;
              -webkit-text-fill-color: #000 !important;
            }
          }
        }
      }

      .ps {
        margin-bottom: 0;
        margin-top: -10px;

        div:hover {
          cursor: pointer;
        }

        .el-form-item__content {
          width: 100%;
          color: #409eff;
        }

        .el-checkbox {
          .el-checkbox__label {
            color: #409eff;
          }
        }

        .is-checked {
          .el-checkbox__label {
            color: #409eff;
          }
        }
      }

      .border {
        background-color: #fff;
        border-radius: 5px;

        .el-form-item__content {
          border: 1px solid #d8d8d8;
        }
      }
    }
  }
}
</style>
